<template>
  <div>
    <div v-loading="pageLoading" class="step_by_hotel">
      <div v-show="!pageLoading && !list.length" class="no_hotel">
        <div>
          对不起，设置的食宿数量已经被订完，请及时联系主办方处理，以便完成报名。
        </div>
        <div>
          联系人及电话：{{ trainInfo.contactPerson }} {{ trainInfo.contactPhoneNumber }}
        </div>
      </div>
      <el-radio-group v-model="vo.id" style="display: block">
        <el-row>
          <el-col v-for="(item, index) in list" :key="index" :span="24">
            <el-radio class="check_box" :label="item.id" border>
              <span class="ib">
                <div class="gl_clear">
                  <div class="hotel_img_wrap gl_fl">
                    <img class="hotel_img" :src="getStaticFileUrl(item.imageUrl)">
                  </div>
                  <div class="hotel_info_wrap">
                    <div class="title">{{ item.name }}</div>
                    <div class="address">{{ item.address }}</div>
                    <div class="date">住宿时间 {{ item.startTime ? item.startTime.slice(0, 10) : '' }} 至 {{ item.endTime ? item.endTime.slice(0, 10) : '' }}</div>
                    <div class="mark">{{ item.comment }}</div>
                    <div style="margin-bottom: 8px">
                      <el-tag class="gl_mr_10" size="mini" effect="plain" type="warning">{{ item.roomType }}</el-tag>
                      <el-tag v-show="item.includeBreakfast || item.includeLunch || item.includeDinner" class="gl_mr_10" size="mini" effect="plain">
                        <span v-show="item.includeBreakfast">早餐 </span>
                        <span v-show="item.includeLunch">午餐 </span>
                        <span v-show="item.includeDinner">晚餐</span>
                      </el-tag>
                    </div>
                    <div>
                      <el-input v-model.trim="item._VoRemarks" type="textarea" placeholder="请输入备注信息" :autosize="{ minRows: 2, maxRows: 2}" maxlength="100" show-word-limit />
                    </div>
                    <div class="price">
                      <span class="price_mark">￥</span>
                      <span class="price_txt">{{ formatMoney(item.price) }}</span>
                    </div>
                  </div>
                </div>
              </span>
            </el-radio>
          </el-col>
        </el-row>
      </el-radio-group>
    </div>

    <el-row>
      <el-col class="step_btn" :span="24" align="center">
        <el-button @click="onPrevStep">上一步</el-button>
        <el-button :disabled="!pageLoading && !list.length" type="primary" :loading="nextLoading" @click="beforeNextStep">下一步</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  api_GET_TrainTrainningHotel // 获取培训酒店列表
} from '@/extend/api/trainswaggerApi/app.js';

export default {
  props: {
    // 传入的个人信息数据
    trainInfo: {
      type: Object,
      default() {
        return {};
      }
    },
    isShow: {
      type: Boolean(),
      default: false
    }
  },
  data () {
    return {
      pageLoading: false,
      nextLoading: false,
      vo: {
        id: '',
        remarks: ''
      },
      list: []
    };
  },
  watch: {
    isShow: {
      immediate: true,
      handler(val) {
        if (val) {
          this.getHotelFromTrainInfo();
          // this.getPageList({
          //   TrainningId: this.trainInfo.id
          // });
        }
      }
    }
  },
  methods: {
    getHotelFromTrainInfo () {
      const _hotel = JSON.parse(JSON.stringify(this.trainInfo.hotels));
      const _list = _hotel.filter(item => item.roomCount) || [];
      // 排序
      _list.sort((a, b) => {
        const _a = a.creationTime;
        const _b = b.creationTime;
        if (_a < _b) { return -1; }
        if (_a > _b) { return 1; }
        return 0;
      });
      // 处理备注
      _list.forEach(item => {
        item._VoRemarks = '';
      });
      this.list = _list;
    },
    // 获取数据
    getPageList(qo) {
      this.pageLoading = true;
      this.nextLoading = true;
      api_GET_TrainTrainningHotel(qo).then(
        res => {
          this.pageLoading = false;
          this.nextLoading = false;
          if (res.items) {
            const _list = res.items || [];
            _list.forEach(item => {
              item._VoRemarks = '';
            });
            this.list = _list;
          }
        }
      )
        .catch(
          error => {
            this.pageLoading = false;
            this.nextLoading = false;
            this.$message({
              message: `获取酒店失败 ${error.error.message}`,
              type: 'error',
              showClose: true
            });
          }
        );
    },
    beforeNextStep () {
      if (this.vo.id) {
        this.vo.remarks = this.list.find(item => item.id === this.vo.id)._VoRemarks;
        this.$emit('onSetTransferData', 'hotel', this.vo);
        this.onNextStep();
      } else {
        this.$message({
          message: `请选择酒店`,
          type: 'warning',
          showClose: true
        });
      }
    },
    // 格式化货币格式 （分）
    formatMoney (num) {
      if (typeof num === 'number' && !Number.isNaN(num)) {
        // num 是数字类型 且不是 NaN
        let strNum = String(num); // 金额文本类型
        if (num >= 0) {
          strNum = strNum.padStart(3, '0'); // 用0填充保证最小三位数
          return strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        } else {
          const _mark = strNum.slice(0, 1); // 负号
          const _noMark = strNum.slice(1); // 无负号数值
          strNum = _noMark.padStart(3, '0'); // 用0填充保证最小三位数
          return _mark + strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        }
      } else {
        return '';
      }
    },
    // 将元转化为分
    yuanToFen(moneyStr) {
      const _moneyStr = String(moneyStr);
      const yuan = Number(_moneyStr.split('.')[0]) || 0;
      const fen = Number(_moneyStr.split('.')[1]) || 0;
      return yuan * 100 + fen;
    },
    // 获取静态文件
    getStaticFileUrl (relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    onPrevStep () {
      this.$emit('onPrevStep');
    },
    onNextStep () {
      this.$emit('onNextStep');
    }
  }
};
</script>
<style>
  .step_by_hotel .el-radio__input.is-checked + .el-radio__label {
    color: unset;
  }
  .step_by_hotel .el-radio__input {
    margin-top: 40px;
  }
  .step_by_hotel .el-radio.is-bordered.is-checked {
    border-color: #31456c;
  }
</style>
<style lang="scss" scoped>
  .check_box {
    width: 100%;
    height: auto;
    padding: 15px 20px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    background-color: #fff;
    box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.08);
  }

  .radio_content {
    width: 100%;
    display: inline-block;
  }

  .ib {
    display: inline-block;
    vertical-align: top;
  }

  .hotel_img_wrap {
    width: 90px;
    height: 90px;
    border-radius: 4px;
    overflow: hidden;
  }
  .hotel_img {
    width: 90px;
    height: 90px;
  }
  .hotel_info_wrap {
    position: relative;
    width: 890px;
    margin-left: 114px;
    color: #353434;

    .title {
      margin-bottom: 8px;
      font-size: 14px;
      line-height: 20px;
      font-weight: 500;
      color: #353434;
    }
    .address,
    .date,
    .mark {
      margin-bottom: 4px;
      font-size: 12px;
      line-height: 17px;
      font-weight: 400;
    }
    .mark {
      color: #828282;
    }

    .price {
      position: absolute;
      top: 0;
      right: 0;
      color: #DC1D1D;
    }
    .price_mark {
      display: inline-block;
      font-size: 14px;
      line-height: 18px;
      font-weight: 500;
      vertical-align: bottom;
    }
    .price_txt {
      display: inline-block;
      font-size: 20px;
      line-height: 20px;
      font-weight: 500;
    }
  }

  .no_hotel {
    padding-top: 20px;
    text-align: center;
    font-size: 14px;
    line-height: 26px;
    color: #3a3939
  }
</style>
